<template>
  <view class="job-refresh-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="nav-title">职位刷新</text>
        <view class="nav-actions">
          <text class="iconfont-v2 icon-gengduo action-icon"></text>
        </view>
      </view>
    </view>

    <!-- 功能说明区域 -->
    <view class="feature-header">
      <view class="feature-icon">
        <text class="iconfont-v2 icon-huojian"></text>
      </view>
      <view class="feature-content">
        <text class="feature-title">使用职位刷新,职位曝光给更多求职者</text>
        <text class="feature-desc">今日剩余{{ remainingRefreshes }}次刷新</text>
      </view>
    </view>

    <!-- 套餐选择区域 -->
    <view class="package-section">
      <text class="section-title">选择套餐</text>
      <view class="package-list">
        <view 
          class="package-item" 
          v-for="(pkg, index) in packages" 
          :key="index"
          :class="{ selected: selectedPackage === index }"
          @click="selectPackage(index)"
        >
          <view class="package-radio">
            <view class="radio-circle" :class="{ active: selectedPackage === index }">
              <view v-if="selectedPackage === index" class="radio-dot"></view>
            </view>
          </view>
          <view class="package-info">
            <text class="package-name">{{ pkg.name }}</text>
            <text class="package-validity">{{ pkg.validity }}</text>
          </view>
          <view class="package-price">
            <text class="price-amount">¥{{ pkg.price }}</text>
            <text class="price-per">{{ pkg.perUnit }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 购买须知 -->
    <view class="notice-section">
      <text class="section-title">购买须知</text>
      <view class="notice-content">
        <text class="notice-text">1.该产品属于数字化商品,不支持七天无理由退费</text>
      </view>
    </view>

    <!-- 底部支付栏 -->
    <view class="payment-bar">
      <view class="payment-info">
        <text class="total-price">¥{{ selectedPackagePrice }}</text>
        <text class="payment-desc">购买后今日可刷新{{ selectedPackageCount }}次</text>
      </view>
      <button class="pay-button" @click="goToPayment">立即支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      remainingRefreshes: 2,
      selectedPackage: 1, // 默认选择第二个套餐
      packages: [
        {
          name: '10次/天',
          validity: '有效期7天',
          price: '105',
          perUnit: '折合每次1.8元',
          count: 10
        },
        {
          name: '10次/天',
          validity: '有效期7天',
          price: '105',
          perUnit: '折合每次1.8元',
          count: 10
        },
        {
          name: '10次/天',
          validity: '有效期7天',
          price: '105',
          perUnit: '折合每次1.8元',
          count: 10
        }
      ]
    }
  },
  computed: {
    selectedPackagePrice() {
      return this.packages[this.selectedPackage]?.price || '0';
    },
    selectedPackageCount() {
      return this.packages[this.selectedPackage]?.count || 0;
    }
  },
  methods: {
    selectPackage(index) {
      this.selectedPackage = index;
    },
    goToPayment() {
      const selectedPkg = this.packages[this.selectedPackage];
      uni.navigateTo({
        url: `/pages/bussiness/payment?type=refresh&packageId=${this.selectedPackage}&price=${selectedPkg.price}&count=${selectedPkg.count}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.job-refresh-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx; // 为底部支付栏留出空间
}

/* 顶部导航栏 */
.header-nav {
  background: #ED6567;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: white;
    }
    
    .nav-actions {
      .action-icon {
        font-size: 32rpx;
        color: white;
      }
    }
  }
}

/* 功能说明区域 */
.feature-header {
  background: #f8f9fa;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .feature-icon {
    width: 60rpx;
    height: 60rpx;
    background: #007AFF;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    .iconfont-v2 {
      font-size: 32rpx;
      color: white;
    }
  }
  
  .feature-content {
    flex: 1;
    
    .feature-title {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .feature-desc {
      font-size: 24rpx;
      color: #666;
    }
  }
}

/* 套餐选择区域 */
.package-section {
  background: white;
  margin: 20rpx 30rpx;
  border-radius: 24rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }
  
  .package-list {
    .package-item {
      display: flex;
      align-items: center;
      padding: 24rpx;
      border: 2rpx solid #f0f0f0;
      border-radius: 16rpx;
      margin-bottom: 16rpx;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.selected {
        border-color: #ED6567;
        background: #fff5f5;
      }
      
      .package-radio {
        margin-right: 20rpx;
        
        .radio-circle {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx solid #ccc;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          
          &.active {
            border-color: #ED6567;
            background: #ED6567;
          }
          
          .radio-dot {
            width: 12rpx;
            height: 12rpx;
            background: white;
            border-radius: 50%;
          }
        }
      }
      
      .package-info {
        flex: 1;
        
        .package-name {
          display: block;
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .package-validity {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .package-price {
        text-align: right;
        
        .price-amount {
          display: block;
          font-size: 36rpx;
          font-weight: 600;
          color: #ED6567;
          margin-bottom: 4rpx;
        }
        
        .price-per {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
}

/* 购买须知 */
.notice-section {
  background: white;
  margin: 0 30rpx 20rpx;
  border-radius: 24rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .notice-content {
    .notice-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

/* 底部支付栏 */
.payment-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .payment-info {
    flex: 1;
    
    .total-price {
      display: block;
      font-size: 40rpx;
      font-weight: 600;
      color: #ED6567;
      margin-bottom: 4rpx;
    }
    
    .payment-desc {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .pay-button {
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 24rpx 48rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: #d55a54;
    }
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .package-section,
  .notice-section {
    margin: 20rpx 24rpx;
    padding: 24rpx;
  }
  
  .feature-header {
    padding: 24rpx;
  }
  
  .payment-bar {
    padding: 16rpx 24rpx;
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  }
}
</style>
